<template>
	<div class="live">
		<div class="basicInfo">
			<div style="flex: 1.5;">
				<span>
					赛事名称：
					<b>{{ MatchSign.com_name }}</b>
				</span>
				<span>
					裁判长：
					<b>{{ MatchSign.referee_name }}</b>
				</span>
			</div>
			<div>
				<el-button type="warning" @click="copyMoreDisplayLink()" size="small" class="copy-btn-MoreDisplay" :data-clipboard-text="copyMoreDisplayUrl()">多屏链接</el-button>
				<el-button type="primary" @click="checkEyeData()" size="small" class="copy-btn-MoreDisplay">{{ checkEye ? '返回列表' : '鹰眼数据' }}</el-button>
			</div>
		</div>
		<el-tabs v-model="activeName" v-show="!checkEye" type="border-card" @tab-click="handleClick" style="margin-top: 20px;">
			<el-tab-pane label="大屏控制" name="0">
				<div class="table">
					<el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'id', order: 'Ascending' }">
						<el-table-column prop="index" label="序号" width="80" sortable></el-table-column>
						<el-table-column prop="ground_name" label="场地号" width="180" sortable :sort-method="sortGroundName"></el-table-column>
						<el-table-column prop="group_name" label="场序" width="100">
							<template slot-scope="scope">
								<span>第{{ scope.row.site.split(',')[0] }}场</span>
							</template>
						</el-table-column>
						<el-table-column prop="" label="选手" width="300">
							<template slot-scope="scope">
								<span>{{ scope.row.clash_info.name_a }} vs {{ scope.row.clash_info.name_b }}</span>
							</template>
						</el-table-column>
						<el-table-column label="大屏" width="90">
							<template slot-scope="scope">
								<el-button type="success" @click="bigScreen(scope.row.id, scope.row.led_status, scope.row.mark)" size="small" v-if="scope.row.led_status == 0">显示</el-button>
								<el-button type="primary" @click="bigScreen(scope.row.id, scope.row.led_status, scope.row.mark)" size="small" v-if="scope.row.led_status == 1">显示中</el-button>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="400" align="center">
							<template slot-scope="scope">
								<el-button
									type="warning"
									@click="copyLink(scope.row.ground_name, scope.row.index)"
									size="small"
									class="copy-btn"
									:data-clipboard-text="copyUrl(scope.row.ground_name, scope.row.mark, scope.row.index)"
								>
									大屏幕比分
								</el-button>
								<el-button
									type="warning"
									@click="copyScoreLink(scope.row.ground_name, scope.row.index)"
									size="small"
									class="copy-btn"
									:data-clipboard-text="copyScoreUrl(scope.row.ground_name, scope.row.mark, scope.row.index)"
								>
									比分条
								</el-button>
								<el-button
									type="warning"
									@click="copyLedLink(scope.row.ground_name, scope.row.index)"
									size="small"
									class="copy-btn"
									:data-clipboard-text="copyLedUrl(scope.row.ground_name, scope.row.mark, scope.row.index)"
								>
									LED屏幕
								</el-button>
								<!-- <el-button
								  type="warning"
								  @click="copyLedFourLink(scope.row.ground_name,scope.row.index)"
								  size="small"
								  class="copy-btn"
								  :data-clipboard-text="copyLedFourUrl(scope.row.ground_name, scope.row.mark, scope.row.index)"
								>
								  LED大屏幕
								</el-button> -->
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-tab-pane>
			<el-tab-pane label="直播列表" name="1">
				<el-table :data="liveList" style="width: 100%">
					<el-table-column prop="ground_name" label="场地号" width="180" sortable :sort-method="sortGroundName"></el-table-column>
					<el-table-column prop="device_name" label="设备名称" width="100"></el-table-column>
					<el-table-column label="直播状态" width="100">
						<template slot-scope="scope">
							<span :class="{ green: scope.row.status }">{{ scope.row.status == 0 ? '未直播' : '正在直播' }}</span>
						</template>
					</el-table-column>
					<el-table-column label="预览图" width="100">
						<template slot-scope="scope">
							<img v-if="scope.row.cover" :src="scope.row.cover" alt="直播预览图" width="50" height="40" />
							<span v-else>无</span>
						</template>
					</el-table-column>
					<el-table-column label="鹰眼" width="100">
						<template slot-scope="scope">
							<span v-if="scope.row.eyes" :style="scope.row.eyes.is_no == 1?'color:green;':''">{{ scope.row.eyes.is_no == 0 ? '无' : '已绑定' }}&emsp;
							<i style="color: #f40;" class="el-icon-circle-close" @click="showdelEyes(scope.row)"></i>
							</span>
							<span v-if="!scope.row.eyes">无</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200">
						<template slot-scope="scope">
							<el-button type="primary" size="small" v-if="scope.row.status == 0" @click="addLive(scope.row.ground_name)">添加直播</el-button>
							<el-button type="warning" size="small" v-if="scope.row.status == 1" @click="closeLive(scope.row.device_id)">取消直播</el-button>
							<!-- <el-button type="primary" size="small" v-if="!scope.row.eyes" @click="addEye(scope.row)">编辑鹰眼</el-button> -->
							<el-button type="primary" size="small"  @click="addEye(scope.row)">编辑鹰眼</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>
		<!-- 鹰眼数据 -->
		<el-table :data="eyeData" v-show="checkEye" stripe style="width: 100%">
			<el-table-column prop="id" label="ID" width="80"></el-table-column>
			<el-table-column prop="match_id" label="match_id"></el-table-column>
			<el-table-column prop="challenge_id" label="challenge_id"></el-table-column>
			<el-table-column label="url">
				<template slot-scope="scope">
					<a :href="scope.row.url" class="eyeUrl" target="_blank">查看</a>
				</template>
			</el-table-column>
			<el-table-column prop="create_time" label="create_time"></el-table-column>
		</el-table>
		<div class="pagenation" v-show="checkEye">
			<el-pagination background @current-change="judgePage" @prev-click="prevPage" @next-click="nextPage" layout="prev, pager, next" :total="total"></el-pagination>
		</div>
		<!-- 添加直播 -->
		<el-dialog title="添加直播" :visible.sync="dialogVisible" width="40%">
			<div class="upload-live">
				<div class="change_c">
					选设备：
					<el-select v-model="device_id" style="width: 200px;" placeholder="选择设备">
						<el-option :label="item.device_name" :value="item.id" v-for="item in device_list" :key="item.id"></el-option>
					</el-select>
				</div>
				<div class="change_c">
					封面：
					<el-upload class="avatar-uploader" :action="actionFile" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="upladImg" :src="upladImg" class="avatar" width="200" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="form_submit">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 添加/编辑鹰眼 -->
		<el-dialog title="添加/修改鹰眼" :visible.sync="showEysDialog" width="30%" center>
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="赛事ID"><el-input v-model="eyeDialog.com_id" :disabled="true"></el-input></el-form-item>
				<el-form-item label="场地名称"><el-input v-model="eyeDialog.ground_name" :disabled="true"></el-input></el-form-item>
				<el-form-item label="match_id"><el-input v-model="eyeDialog.value" placeholder="请输入match_id"></el-input></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showEysDialog = false">取 消</el-button>
				<el-button type="primary" @click="subEyeData">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 删除鹰眼对话框 -->
		<el-dialog
			center
		  title="提示"
		  :visible.sync="delEyesDialog"
		  width="30%"
		  >
		  <span style="width: 100%;text-align: center;">确认解绑该鹰眼吗？</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="delEyesDialog = false">取 消</el-button>
		    <el-button type="primary" @click="delEyes">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
	data() {
		return {
			options: [],
			date: '',
			tableData: [],
			status: null,
			MatchSign: {},
			time: Date.parse(new Date()) / 1000,
			activeName: 0,
			liveList: [],
			dialogVisible: false,
			device_id: '',
			device_list: [],
			upladImg: '',
			ground_name: '',
			index: 0,
			checkEye: false,
			eyeData: [],
			eyeDialog: [],
			showEysDialog: false,
			match_id: '',
			delEyesDialog:false,
			id:''
		};
	},
	created() {
		this.getEyeData();
	},
	computed: {
		copyUrl(ground_name, mark, index) {
			return function(ground_name, mark, index) {
				let url = `${location.protocol}//${location.host}/admin/#/everyGroundLed?com_id=${this.$route.query.MatchId}&ground_name=${ground_name}&mark=${mark}&time=${
					this.tableData[this.index].match_date
				}`;
				return url;
			};
		},
		copyScoreUrl(ground_name, mark, index) {
			return function(ground_name, mark, index) {
				let url = `${location.protocol}//${location.host}/admin/#/score?com_id=${this.$route.query.MatchId}&ground_name=${ground_name}&mark=${mark}&time=${
					this.tableData[this.index].match_date
				}`;
				return url;
			};
		},
		copyLedUrl(ground_name, mark, index) {
			return function(ground_name, mark, index) {
				let url = `${location.protocol}//${location.host}/admin/#/led?com_id=${this.$route.query.MatchId}&ground_name=${ground_name}&mark=${mark}&time=${
					this.tableData[this.index].match_date
				}`;
				return url;
			};
		},
		copyLedFourUrl(ground_name, mark, index) {
			return function(ground_name, mark, index) {
				console.log(this.tableData[this.index]);
				let url = `${location.protocol}//${location.host}/admin/#/led_four?com_id=${this.$route.query.MatchId}&ground_name=${ground_name}&mark=${mark}&time=${
					this.tableData[this.index].match_date
				}`;
				return url;
			};
		},
		copyMoreDisplayUrl() {
			return function() {
				let url = `${location.protocol}//${location.host}/admin/#/liveMoreDisplay?com_id=${this.$route.query.MatchId}&time=${this.time}`;
				return url;
			};
		},
		actionFile() {
			return `${this.$axios.defaults.baseURL}/event/file`;
		}
	},
	mounted() {
		this.getCompeInfo();
		this.changeDate();
		this.ground_list();
		this.gain_device_list();
	},
	methods: {
		showdelEyes(row){
			this.delEyesDialog = true
			this.id=row.eyes.id
		},
		// 删除鹰眼
		delEyes(){
			let id = this.id
			this.$axios
			.get('Eyes/relieve',{params:{id},headers:{token:window.sessionStorage.getItem('token')}})
			.then(res=>{
				console.log(res)
				if(res.data.code==2000){
					this.$message({
						type:'success',	
						message:res.data.msg
					})
					this.delEyesDialog=false
					this.ground_list()
				}else{
					this.$message({
						type:'danger',
						message:res.data.msg
					})
				}
			})
		},
		subEyeData() {
			this.$axios
				.get('Eyes/add_eyes', {
					params: {
						com_id: this.eyeDialog.com_id,
						ground_name: this.eyeDialog.ground_name,
						value: this.eyeDialog.value
					},
					headers: {
						token: window.sessionStorage.getItem('token')
					}
				})
				.then(res => {
					if (res.data.code == 2000) {
						this.$message({
							type: 'success',
							message: res.data.msg
						});
						this.ground_list();
						this.match_id = ''
						this.showEysDialog = false
					} else {
						this.$message({
							type: 'warning',
							message: res.data.msg
						});
					}
				});
		},
		// 添加\编辑鹰眼
		addEye(row) {
			console.log(row);
			if(row.eyes){
				this.eyeDialog = row.eyes;
			}else{
				this.eyeDialog.com_id = this.$route.query.MatchId
				this.eyeDialog.ground_name = row.ground_name
				this.eyeDialog.value = ''
			}
			this.showEysDialog = true;
		},
		checkEyeData() {
			this.checkEye = !this.checkEye;
		},
		getEyeData() {
			this.$axios
				.get('Eyes/get_eyes', {
					params: {
						page: this.page
					},
					headers: {
						token: window.sessionStorage.getItem('token')
					}
				})
				.then(res => {
					console.log(res);
					this.eyeData = res.data.data.list;
					this.total = res.data.data.count;
				});
		},
		form_submit() {
			this.$axios
				.post(
					'/Device/add_live_device',
					{
						com_id: this.$route.query.MatchId,
						device_id: this.device_id,
						cover: this.upladImg,
						ground_name: this.ground_name
					},
					{
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					}
				)
				.then(res => {
					this.dialogVisible = false;
					if (res.data.code == 2000) {
						this.$message({
							type: 'success',
							message: res.data.msg
						});
						this.ground_list();
					} else {
						this.$message({
							type: 'error',
							message: res.data.msg
						});
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		handleAvatarSuccess(res, file) {
			this.upladImg = res.data;
		},
		beforeAvatarUpload(file) {
			const isJPG = file.type;
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!/^image\/(jpeg|png|jpg)$/.test(isJPG)) {
				this.$message.error('上传头像图片格式不正确!');
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},
		gain_device_list() {
			this.$axios
				.post(
					'/Device/gain_device_list',
					{},
					{
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					}
				)
				.then(res => {
					if (res.data.code == 2000) {
						this.device_list = res.data.data;
					} else {
						this.$message({
							type: 'error',
							message: res.data.msg
						});
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		ground_list() {
			this.$axios
				.post(
					'/Device/ground_list',
					{
						com_id: this.$route.query.MatchId
					},
					{
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					}
				)
				.then(res => {
					if (res.data.code == 2000) {
						this.liveList = res.data.data;
					} else {
						this.$message({
							type: 'error',
							message: res.data.msg
						});
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		addLive(ground_name) {
			this.dialogVisible = true;
			this.ground_name = ground_name;
		},
		closeLive(device_id) {
			this.$confirm('是否取消直播?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios
						.post(
							'/Device/cancel_live_device',
							{
								device_id: device_id
							},
							{
								headers: {
									token: window.sessionStorage.getItem('token')
								}
							}
						)
						.then(res => {
							if (res.data.code == 2000) {
								this.$message({
									type: 'success',
									message: '取消直播成功!'
								});
								this.ground_list();
							} else {
								this.$message({
									type: 'error',
									message: res.data.msg
								});
							}
						})
						.catch(res => {
							console.log(res);
						});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					});
				});
		},
		handleClick(tab, event) {
			console.log(tab);
		},
		copyLink(ground_name, index) {
			this.index = index;
			const clipboard = new Clipboard('.copy-btn');
			clipboard.on('success', e => {
				this.$message({
					type: 'success',
					message: '已成功复制到剪贴板'
				});
				// 释放内存
				clipboard.destroy();
			});
			clipboard.on('error', e => {
				// 不支持复制
				this.$message({
					type: 'error',
					message: '您的浏览器暂不支持复制功能'
				});
				// 释放内存
				clipboard.destroy();
			});
		},
		copyScoreLink(ground_name, index) {
			this.index = index;
			const clipboard = new Clipboard('.copy-btn');
			clipboard.on('success', e => {
				this.$message({
					type: 'success',
					message: '已成功复制到剪贴板'
				});
				// 释放内存
				clipboard.destroy();
			});
			clipboard.on('error', e => {
				// 不支持复制
				this.$message({
					type: 'error',
					message: '您的浏览器暂不支持复制功能'
				});
				// 释放内存
				clipboard.destroy();
			});
		},
		copyLedLink(ground_name, index) {
			this.index = index;
			const clipboard = new Clipboard('.copy-btn');
			clipboard.on('success', e => {
				this.$message({
					type: 'success',
					message: '已成功复制到剪贴板'
				});
				// 释放内存
				clipboard.destroy();
			});
			clipboard.on('error', e => {
				// 不支持复制
				this.$message({
					type: 'error',
					message: '您的浏览器暂不支持复制功能'
				});
				// 释放内存
				clipboard.destroy();
			});
		},
		copyLedFourLink(ground_name, index) {
			this.index = index;
			const clipboard = new Clipboard('.copy-btn');
			clipboard.on('success', e => {
				this.$message({
					type: 'success',
					message: '已成功复制到剪贴板'
				});
				// 释放内存
				clipboard.destroy();
			});
			clipboard.on('error', e => {
				// 不支持复制
				this.$message({
					type: 'error',
					message: '您的浏览器暂不支持复制功能'
				});
				// 释放内存
				clipboard.destroy();
			});
		},
		copyMoreDisplayLink() {
			const clipboard = new Clipboard('.copy-btn-MoreDisplay');
			clipboard.on('success', e => {
				this.$message({
					type: 'success',
					message: '已成功复制到剪贴板'
				});
				// 释放内存
				clipboard.destroy();
			});
			clipboard.on('error', e => {
				// 不支持复制
				this.$message({
					type: 'error',
					message: '您的浏览器暂不支持复制功能'
				});
				// 释放内存
				clipboard.destroy();
			});
		},
		sortGroundName(obj1, obj2) {
			let a = obj1.site.split(',')[1];
			let b = obj2.site.split(',')[1];
			return parseInt(a - b);
		},
		getCompeInfo() {
			this.$axios
				.get('/competition/getCompeInfo', {
					params: {
						com_id: this.$route.query.MatchId
					},
					headers: {
						token: window.sessionStorage.getItem('token')
					}
				})
				.then(res => {
					if (res.data.code) {
						this.MatchSign = res.data.data;
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		changeDate() {
			this.$axios
				.post(
					'/LedShow/led_index',
					{
						com_id: this.$route.query.MatchId,
						match_date: this.date
					},
					{
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					}
				)
				.then(res => {
					if (res.data.code == 2000) {
						let status = res.data.data[1].id ? res.data.data[1].id : false;
						let mark = res.data.data[1].mark ? res.data.data[1].mark : false;
						this.status = status;
						for (let i = 0; i < res.data.data[0].length; i++) {
							res.data.data[0][i].status = false;
							res.data.data[0][i].index = i + 1;
							res.data.data[0][i].led_more_status = 0;
							if (res.data.data[0][i].id == status && res.data.data[0][i].mark == mark) {
								res.data.data[0][i].status = true;
							}
						}
						this.tableData = res.data.data[0];
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		display(id, mark) {
			this.$axios
				.post(
					'/LedShow/set_pandect_id',
					{
						com_id: this.$route.query.MatchId,
						id: id,
						mark: mark
					},
					{
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					}
				)
				.then(res => {
					if (res.data.code == 2000) {
						let id = res.data.data[0].id;
						let mark = res.data.data[0].mark;
						for (var i = 0; i < this.tableData.length; i++) {
							this.tableData[i].status = false;
							if (this.tableData[i].id == id && this.tableData[i].mark == mark) {
								this.tableData[i].status = true;
							}
						}
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		bigScreen(id, ledStatus, mark) {
			let led_status = ledStatus == 0 ? 1 : 0;
			this.$axios
				.post(
					'/LedShow/led_more_status',
					{
						com_id: this.$route.query.MatchId,
						id: id,
						led_status: led_status,
						mark: mark,
						time: this.time
					},
					{
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					}
				)
				.then(res => {
					if (res.data.code == 2000) {
						this.$message({
							type: 'success',
							message: res.data.msg
						});
						this.changeDate();
					} else {
						this.$message({
							type: 'error',
							message: res.data.msg
						});
					}
				})
				.catch(res => {
					console.log(res);
				});
		}
	}
};
</script>

<style lang="less" scoped>
/deep/ .el-input__inner{
	width: 20vw;
}
.eyeUrl {
	display: inline-block;
	padding: 9px 15px;
	background-color: #009900;
	border-radius: 3px;
	color: #fff;
	text-decoration: none;
}
.pagenation {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 60px;
}
.change_c {
	margin-bottom: 20px;
	display: flex;
}
.live {
	margin: 50px;

	.date {
		margin-right: 20px;
		margin-left: 10px;
	}
	.green {
		color: #259b24;
	}
	.table {
		margin-top: 20px;
	}
}
.avatar-uploader {
	width: 200px;
	height: 200px;
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.basicInfo {
	background: linear-gradient(90deg, rgba(66, 185, 131, 0.2), rgba(66, 185, 131, 0.4));
	border-radius: 2px;
	line-height: 30px;
	height: 30px;
	padding: 15px;
	overflow: hidden;
	display: flex;
	justify-content: space-around;
	align-items: center;

	span {
		margin-right: 20px;
	}

	.btnGroup {
		/*height: 60px;*/
		/*float: right;*/
		margin-right: 20px;
	}

	.date {
		width: 25%;
		padding: 10px 15px;
	}
}
</style>
